<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>支付配置管理</title>
    <link href="__LAYUIADMIN__/res/layui/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="layui-container" style="margin-top: 30px;">
        <!-- 支付配置卡片 -->
        <div class="layui-card">
            <div class="layui-card-header">支付方式配置</div>
            <div class="layui-card-body">
                <form class="layui-form">
                    <div class="layui-tab" lay-filter="formTabs">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基本配置</li>
                            <li>易支付/码支付</li>
                            <li>支付宝面对面</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div>
                                    <!-- 微信支付模块 -->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">微信支付</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" {$data.wechat ? 'checked' : ''} name="wechat" lay-skin="switch"
                                                lay-text="开启|关闭" value="1">
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">支付方式</label>
                                            <div class="layui-input-block">
                                                <select name="wechat_method" lay-verify="required" lay-search>
                                                    <option value="1" {$data.wechat_method == "1" ? 'selected' : ""}>易支付</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 支付宝模块 -->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">支付宝</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox"  {$data.alipay ? 'checked' : ''} name="alipay" lay-skin="switch"
                                                lay-text="开启|关闭" value="1">
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">支付选项</label>
                                            <div class="layui-input-block">
                                                <select name="alipay_method" lay-verify="required" lay-search>
                                                    <option value="2" {$data.alipay_method == "2" ? 'selected' : ""}>面对面</option>
                                                    <option value="1" {$data.alipay_method == "1" ? 'selected' : ""}>易支付</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- QQ支付模块 -->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">QQ</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" {$data.qq ? 'checked' : ''}  name="qq" lay-skin="switch" lay-text="开启|关闭"
                                                value="1">
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">支付选项</label>
                                            <div class="layui-input-block">
                                                <select name="qq_method" lay-verify="required" lay-search>
                                                    <option value="1" {$data.qq_method == "1" ? 'selected' : ""}>易支付</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="epay">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">接口地址</label>
                                        <div class="layui-input-block">
                                            <input type="url" name="request_url" lay-verify="url" placeholder="请输入接口地址"
                                                autocomplete="off" class="layui-input" value="{$data.epayConf.apiUrl}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">商户ID</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="pid" lay-verify="required" placeholder="请输入商户ID"
                                                autocomplete="off" class="layui-input"  value="{$data.epayConf.pid}">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">API密钥</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="key" lay-verify="required"
                                                placeholder="请输入API密钥" autocomplete="off" class="layui-input" value="{$data.epayConf.key}">
                                        </div>
                                    </div>


                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="alipay-face">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">应用ID</label>
                                        <div class="layui-input-block">
                                            <input type="url" name="appId" placeholder="请输入接口地址" autocomplete="off"
                                                class="layui-input" value="{$data.alipayConf.appId}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">支付宝公钥</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="public_key" lay-verify="required"
                                                placeholder="请输入支付宝公钥" autocomplete="off" class="layui-input" value="{$data.alipayConf.public_key}">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">私钥</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="private_key" lay-verify="required"
                                                placeholder="请输入私钥" autocomplete="off" class="layui-input" value="{$data.alipayConf.private_key}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="layui-form-item">
                        <button class="layui-btn" lay-submit lay-filter="saveConfig">保存配置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="__LAYUIADMIN__/res/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            var form = layui.form,
                layer = layui.layer;
            $ = layui.$;

            // 表单提交监听
            form.on('submit(saveConfig)', function (data) {
                const field = data.field
                const configData = {
                    wechat: field.wechat == 1 ? true : false,
                    wechat_method: field.wechat_method,
                    qq: field.qq == 1 ? true : false,
                    qq_method: field.qq_method,
                    alipay: field.alipay == 1 ? true : false,
                    alipay_method: field.alipay_method,
                    epayConf: {
                        apiUrl: field.request_url,
                        key: field.key,
                        pid: field.pid
                    },
                    alipayConf: {
                        appId: field.appId,
                        public_key: field.public_key,
                        private_key: field.private_key
                    }
                }
                $.ajax({
                    url: '/admin/system/update?conf=sys_pay',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(configData),
                    dataType: 'json',
                    beforeSend: function () {
                        layer.load(2, { shade: 0.2 });
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    },
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg('配置保存成功');
                        } else {
                            layer.msg(res.msg || '保存失败', { icon: 2 });
                        }
                    },
                    error: function (xhr) {
                        layer.msg('网络异常：' + xhr.statusText, { icon: 2 });
                    }
                });
                return false;
            });


        });
    </script>
</body>

</html>